@import "../../style/public";
.pettySavings-list {
  .tabList {
    display: flex;
    @include thin-border(false, false, bottom);
    background: #fff;
    li {
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      flex: 1;
      text-align: center;
      color: #333;
      @include remCalc(font-size, 32);
      position: relative;
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        @include remCalc(height, 4);
        @include remCalc(bottom, 0);
        left: 0;
        background: #fff;
      }
      &.active {
        color: $color-red;
        &::before {
          background: $color-red;
        }
      }
    }
  }
  .list {
    @include remCalc(padding, 0, 30);
    > li {
      background: #fff;
      @include remCalc(margin-top, 20);
      @include remCalc(padding, 0, 0, 0, 30);
      @include remCalc(border-radius, 8);
      .wrap {
        position: relative;
        @include remCalc(padding, 20, 30, 20, 0);
        display: flex;
        align-items: center;
        .left-icon {
          @include remCalc(padding, 0, 20, 0, 0);
          img {
            display: block;
            @include remCalc(width, 88);
            @include remCalc(height, 88);
            @include remCalc(border-radius, 2);
          }
        }
        .right-data {
          .shop-name {
            @include remCalc(font-size, 32);
            @include remCalc(width, 480);
            color: #333;
            word-break: break-all;
            @extend %text-overflow;
          }
          .data-time {
            @include remCalc(padding-top, 10);
            @include remCalc(font-size, 24);
            color: #999;
          }
        }
        > i {
          color: #ccc;
          @include remCalc(font-size, 36);
          @include remCalc(padding, 0, 30, 0, 20);
        }
      }
    }
  }
  .btn {
    background: $color-red;
    color: #fff;
    text-align: center;
    @include remCalc(font-size, 36);
    @include remCalc(line-height, 88);
  }
}
.pettySavings-index {
  .btn {
    background: $color-red;
    color: #fff;
    text-align: center;
    @include remCalc(font-size, 36);
    @include remCalc(line-height, 88);
  }
}
.pettySavings-settings {
  .preview {
    width: 100%;
    height: auto;
  }
  .sub-text {
    @include remCalc(font-size, 24);
    @include remCalc(padding, 0, 30, 20, 30);
    //@include remCalc(margin, 20, 0, 0, 0);
    color: #999;
  }
  .link {
    color: $color-red;
    margin-left: 1em;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      @include remCalc(left, -30);
      @include remCalc(right, -30);
      @include remCalc(bottom, -20);
      @include remCalc(top, -20);
      z-index: 1;
    }
  }
  .form-ul {
    @include thin-border(true, false);
    background: #fff;
    > li {
      display: flex;
      @include remCalc(font-size, 32);
      @include remCalc(padding, 20, 30);
      @include remCalc(margin, 20, 0, 0, 0);
      color: #333;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      > span {
        text-align: left;
      }

      > div {
        text-align: right;
        display: flex;
        align-items: center;
        i {
          color: #ccc;
        }
      }
    }
  }
}
.pettySavings-eidt {
  .alignCenter{
    align-items: center;
  }
  .logo {
    width: auto;
    @include remCalc(height, 60);
  }
  .align-center {
    align-items: center;
  }
  .page-body {
    @include remCalc(padding, 0, 0, 100, 0);
  }
  .btn {
    background: $color-red;
    color: #fff;
    text-align: center;
    @include remCalc(font-size, 36);
    @include remCalc(line-height, 88);
  }
  .form-style {
    input {
      @include remCalc(padding, 20, 0);
      @include remCalc(margin, -20, 0);
    }
    li.disabled{
      color:#ddd !important;  
    }
  }
  .czgz {
    color: #333;
    text-align: center;
    @include remCalc(font-size, 32);
    > ul {
      @include remCalc(margin, 0, 0, 20, 0);
      @include thin-border(false, false, bottom);
      background: #fff;
      > li {
        display: flex;
        align-items: center;
        @include remCalc(padding, 22, 30);
        @include thin-border(false, false, top);
        span {
          @include remCalc(padding, 0, 20, 0, 0);
        }
        .split {
          @include remCalc(height, 52);
          width: 0;
          border-right: 1px solid #ddd;
          padding: 0;
          @include remCalc(margin-right, 20);
        }
        .del {
          flex: 1;
          text-align: right;
        }
        i {
          @include remCalc(font-size, 40);
          display: block;
          color: $color-red;
          position: relative;
          &::after {
            position: absolute;
            content: "";
            @include remCalc(left, -20);
            @include remCalc(right, -30);
            @include remCalc(top, -24);
            @include remCalc(bottom, -24);
          }
        }
        input {
          text-align: center;
          @include remCalc(font-size, 32);
          @include remCalc(width, 130);
          @include remCalc(padding, 20, 20);
          @include remCalc(margin, -20, 0);
        }
      }
    }
    .add-rule {
      background: #fff;
      border: 1px solid $color-red;
      color: $color-red;
      display: inline-flex;
      align-items: center;
      @include remCalc(margin, 0, 0, 20, 0);
      @include remCalc(padding, 8, 40);
      @include remCalc(border-radius, 8);
      i {
        @include remCalc(font-size, 28);
        @include remCalc(padding, 0, 10, 0, 0);
      }
    }
  }
  .flex-item-right {
    display: flex;
    flex-direction: column;
    text-align: left;
    input {
      @include remCalc(width, 140);
      @include remCalc(padding, 20, 10);
      @include remCalc(margin, -20, 0);
      @include remCalc(font-size, 32);
    }
    textarea {
      -webkit-appearance: none;
      background: #f8f8f8;
      border: 1px solid #e8e8e8;
      box-sizing: border-box;
      @include remCalc(padding, 20);
      @include remCalc(height, 220);
      @include remCalc(margin-top, 20);
      @include remCalc(font-size, 28);
      color: #000;
    }
    .sub-text {
      @include remCalc(padding, 14, 0, 0, 0);
      @include remCalc(font-size, 24);
      color: #999;
    }
  }
}

.pettySavings-details {
  .top {
    background: #fff;
    @include remCalc(padding, 20, 30);
    .shop-name {
      @include remCalc(font-size, 32);
      color: #333;
    }
    .status {
      display: inline-block;
      @include remCalc(font-size, 24);
      @include remCalc(padding, 0, 10);
      @include remCalc(height, 36);
      @include remCalc(line-height, 36);
      @include remCalc(margin, 0, 0, 20, 0);
      color: #999;
      border: 1px solid #999999;
      border-radius: 4px;
      border-radius: 4px;
      &.orange {
        color: #fd8217;
        border: 1px solid #fd8217;
      }
      &.grey {
        color: #999;
        border: 1px solid #999999;
      }
      &.blue {
        color: $color-red;
        border: 1px solid $color-red;
      }
    }
    .top-ul {
      @include remCalc(font-size, 32);
      > li {
        display: flex;
        @include remCalc(padding, 12, 0);
        > span {
          @include remCalc(width, 172);
          color: #999;
          white-space: nowrap;
        }
        > div {
          flex: 1;
          word-break: break-all;
          text-align: right;
          color: #333;
          img {
            display: inline-block;
            width: auto;
            @include remCalc(height, 60);
          }
        }
      }
    }
    .content-ul {
      li {
        color: #333;
        line-height: 1.5;
        word-break: break-all;
        word-wrap: break-word;
      }
    }
  }
  .btn {
    background: $color-red;
    color: #fff;
    text-align: center;
    @include remCalc(font-size, 36);
    @include remCalc(line-height, 88);
    &.stop{
      background: $color-red;
    }
  }
}
